<template>
  <div class="user_info_wrap">
    <head-top :headTitle="title" :go-back='true'></head-top>
    <ul class="user_info_content bg_fff clear">
      <li class="user_info_list">
        <span class="user_info_title user_info_head_img fl">头像</span>
        <span class="user_info_img fr">
          <my-cropper :headerImage="userInfo.userImg" @getHeaderImage="newHeaderImage"></my-cropper>
        </span>
        <i class="iconfont icon_right fr"></i>
      </li>
      <router-link tag="li"  class="user_info_list" :to="{ name: 'editUserName',params:{userName:userInfo.userName,user:userInfo.user}}" append>
        <span class="user_info_title fl">昵称</span>
        <span class="user_info_text fr">{{ userInfo.userName }}</span>
        <i class="iconfont icon_right fr"></i>
      </router-link>
      <router-link tag="li"  class="user_info_list" :to="{ name: 'editbirthday',params:{birthday:userInfo.birthday,user:userInfo.user}}" append>
        <span class="user_info_title fl">生日</span>
        <span class="user_info_text fr">{{ userInfo.birthday }}</span>
        <i class="iconfont icon_right fr"></i>
      </router-link>
      <router-link tag="li"  class="user_info_list" :to="{ name:'editUserAddr',params:{userName:userInfo.userName,user:userInfo.user}}" append>
        <span class="user_info_title fl">收货地址</span>
        <span class="user_info_text fr">修改/添加</span>
        <i class="iconfont icon_right fr"></i>
      </router-link>
    </ul>
    <transition name="router-slid" mode="out-in">
      <router-view></router-view>
    </transition>
    <div class="btn_wrap bg_fff center">
      <div class="btn" @click="logout">退出账号</div>
    </div>
  </div>
</template>
<script>
import store from "@/store/store.js";
import * as types from "@/store/types";
import Bus from "@/components/bus.js";

export default {
  name: "UserInfo",
  data() {
    return {
      title: "个人信息",
      userInfo: {},
    };
  },
  created: function() {
      
  },
  mounted: function() {
    this.$nextTick(function() {
      var that = this;
      // var userInfo = this.$route.params;
      // console.log(userInfo)
      // that.userInfo = userInfo;
      that.userInfo = Bus.BusUserInfo;
      console.log(that.userInfo);
    });
  },
  methods: {
    newHeaderImage(newImg) {
      this.userInfo.userImg = newImg;
    },
    logout() {
      console.log("登出");
      store.commit(types.LOGOUT, window.localStorage.getItem("token"));
      this.$router.replace({ path: "/login" });
    }
  },
  computed:{
  }
};
</script>
<style lang="css" scoped>
.top_bar {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  line-height: 30px;
  background: #fff;
}

.top_bar i {
  color: #69d6c6;
  font-size: 20px;
}

.top_bar .top_bar_title {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
}

.user_info_wrap {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: #f5f5f5;
  color: #6e6e6e;
  padding-top: 34px;
  z-index: 200;
}
.user_info_content {
  margin-top: 10px;
  /* border-top: 1px solid #d7d7d7; */
}
.user_info_list {
  float: left;
  position: relative;
  width: 100%;
  font-size: 14px;
  padding: 5px 0;
  border-bottom: 1px solid #d7d7d7;
  line-height: 30px;
  color: #4a4a4a;
  margin: 0 auto;
  padding: 5px 5%;
}
.user_info_list .user_info_text{
  margin-right: 20px;
  font-size: 12px;
}
.user_info_list .icon_right{
  right: 5%;
}
.user_info_head_img {
  position: absolute;
  left: 5%;
  top: 50%;
  margin-top: -10px;
}

.user_info_img {
  margin-right: 10px;
  width: 60px;
  height: 60px;
}

.user_info_list i {
  position: absolute;
  top: 50%;
  right: 0px;
  margin-top: -15px;
}
.router-slid-enter-active, .router-slid-leave-active {
    transition: all .4s;
}
.router-slid-enter, .router-slid-leave-active {
    transform: translate3d(2rem, 0, 0);
    opacity: 0;
}
</style>
